<template>
  <div>
  <el-table
    :data="tableData"
    border
    style="margin: 0 450px;width: 34.9%">
    <el-table-column
      prop="throneName"
      label="名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="thronePath"
      label="域名"
      width="200">
    </el-table-column>
    <el-table-column
      label="操作"
      width="150">
      <!-- popover里面是点击查看弹出框里面的内容 -->
      <template slot-scope="scope">
          <el-popover
          placement="right"
          width="400"
          trigger="click">

          <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="名称" prop="throneName">
      <el-input type="text" readonly="readonly" v-model="ruleForm.throneName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="描述" prop="throneDesc">
    <el-input type="text" readonly="readonly" v-model="ruleForm.throneDesc" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="域名" prop="thronePath">
    <el-input readonly="readonly" v-model.number="ruleForm.thronePath"></el-input>
    </el-form-item>
    <el-form-item>
  </el-form-item>
</el-form>

          <el-button slot="reference" @click="handleClick(scope.row)" style="color:green;width:45px" type="text" size="small">查看</el-button>
      </el-popover>
      <!-- 下面的button已经被popover里面的button替代了 -->
        <!-- <el-button  style="color:green;width:45px" type="text" size="small">查看</el-button> -->
        <el-button @click="handleDelete(scope.row)" type="text" size="small"  style="color:red;width:30px">删除</el-button>
        <el-button @click="handleUpdate(scope.row)" type="text" size="small" style="width:30px">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <Pager 
      :page="page"
      :limit="limit"
      :total="total"
      :panelNumber="panelNumber"
      @changePage="handleNewPage"
  ></Pager>
  <div>
    <el-input v-model="input" placeholder="请根据名称输入查询内容" style="width:20%;margin-left:500px"></el-input>
     <el-button @click="queryThrone" type="success" style="margin-left:5px">查询</el-button>
  </div>
  <div>
      <router-link :to="{name:'AddThrone'}">
        <el-button type="success" style="margin-left:500px;margin-top:10px" >添加权限</el-button>
      </router-link>
  </div>
</div>
</template>

<script>
import Pager from '../components/Pager'
import {getThroneList} from '../services/ThroneService.js'
import {queryThrone} from '../services/ThroneService.js'
import {deleteThrone} from '../services/ThroneService.js'
export default {
  components:{
    Pager,
  },
    async created(){
        var resp = await getThroneList(this.page,this.limit);
        this.tableData = resp.list;
        this.total = resp.total;
    },
     methods: {
       async queryThrone(){
          this.$router.push({
            query: {
            page: 1,
          },
          }); 
          var resp = await queryThrone(this.page,this.limit,this.input);
          this.tableData = resp.data.list;
          this.total = resp.data.total;
       }
       ,
      handleClick(row) {
        this.ruleForm = row;
      },
      handleUpdate(row){
        this.$router.push({name:'UpdateThrone'
        ,params:row});
      },
      handleDelete(row) {
        this.$confirm("你确定要删除该用户的信息吗？",{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        }).then((resp)=>{
          if(resp == "confirm"){
            deleteThrone(row.throneId).then((res) =>{
              if(res.data == "true"){
                this.handleNewPage(this.page).then((re) => {

                });
                // this.reload();
                alert("删除成功");
              }else {
                alert("删除失败,服务器正忙");
              }
          })
          }
         
        }).catch(err => err)
      },
      async handleNewPage(newPage) {

      this.$router.push({
        query: {
          page: newPage,
        },
      }); 

      var resp = await getThroneList(this.page,this.limit);
      this.tableData = resp.list;
      this.total = resp.total;
    }
    },
    data() {
      return {
      tableData: [],
      limit: 5,
      total: 0,
      panelNumber: 10,
      input:'',
      ruleForm:{
        throneName:"",
        throneDesc:"",
        thronePath:""
      }
      }
    },
    computed:{
      page(){
        return +this.$route.query.page || 1;
      }
    }
}
</script>

<style>

</style>